<template>
  <div class="f ac mb10 mr10">
    <div v-if="item.label" class="g3 fs14 nowrap">{{item.label}}：</div>
    <el-date-picker
      v-model="item.value"
      type="daterange"
      range-separator="到"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      :editable="false"
      @change="changeVal"
    >
    </el-date-picker>
  </div>
</template>
<script setup>
  import { ref } from "vue"
  import { dateFormater } from "@/common.js"
  /*************************************** */
  /**************data********************* */
  /*************************************** */
  const props = defineProps({
    item: { type: Object,default: () => ({}) },
    searchList: { type: Array,default: () => [] },
  })
  const emit = defineEmits(['setSearchList', 'changeSearch'])
  /*************************************** */
  /**************function***************** */
  /*************************************** */
  // 调整
  const changeVal = function (e) {
    if(!e) {return }
    const [startDate, endDate] = e
    const value = [dateFormater('YYYY-MM-DD', startDate), dateFormater('YYYY-MM-DD', endDate)]
    const searchList = _.searchCover(props.searchList, {id: props.item.id}, v => ({...v, value}))
    emit('setSearchList', searchList)
    const getParams = searchList.reduce((prev, item) => (prev[item.key] = item.value, prev), {})
    emit('changeSearch', {page: 1, ...getParams })
  }
</script>
<style scoped></style>